<template>
	<el-row :gutter="20" style="padding-left: 10px;height: 100vh">
		<el-col :span="9">
			<el-button @click="state.dialogSaveVisible = true">新增</el-button>
			<el-table :highlight-current-row="true" :data="state.cateList" style="height: 100vh">
				<el-table-column prop="name" label="一级类别名称" align="center">
					<template #default="scope">
					<span style="cursor: pointer" @click="to(scope.row.id)">	{{scope.row.name}}</span>
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					fixed="right"
					label="操作"
					min-width="120"
				>
					<template #default="scope">
						<el-button
							link
							type="primary"
							size="small"
							@click.prevent="btn('修改', scope.row)">修改</el-button>
						<el-button
							link
							type="primary"
							size="small"
							@click.prevent="del(scope.row.id,scope.row.fid)"
						>删除</el-button
						>
					</template>
				</el-table-column>
			</el-table>
		</el-col>
		<el-col :span="15">
			<el-table :data="state.childList" >
				<el-table-column prop="name" label="名称" align="center" />
				<el-table-column
					align="center"
					fixed="right"
					label="操作"
					min-width="120"
				>
					<template #default="scope">
						<el-button
							link
							type="primary"
							size="small"
							@click.prevent="btn('修改', scope.row)">修改</el-button>
						<el-button
							link
							type="primary"
							size="small"
							@click.prevent="del(scope.row.id,scope.row.fid)"
						>删除</el-button
						>
					</template>
				</el-table-column>
			</el-table>
		</el-col>
	</el-row>
	<el-dialog
		v-model="state.dialogVisible"
		:title="state.title"
		width="50%"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
	>
		<el-form
			ref="ruleFormRef"
			:rules="rules"
			:model="state.from"
			label-width="auto"
			style="max-width: 800px"
		>
			<el-form-item label="分类名称" prop="name">
				<el-input v-model="state.from.name" />
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button v-if="state.title === '修改'" @click="update(ruleFormRef)">确定 修改</el-button>
			</div>
		</template>
	</el-dialog>
	<el-dialog
		v-model="state.dialogSaveVisible"
		title="新增"
		width="50%"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
	>
		<el-form
			ref="ruleFormRef"
			:rules="rules"
			:model="state.from"
			label-width="auto"
			style="max-width: 800px"
		>
			<el-form-item label="一级分类名称" prop="fid">
				<el-select v-model="state.from.fid" placeholder="请选择">
					<el-option label="顶级分类" value="0" />
					<el-option v-for="item in state.cateList" :label="item.name" :value="item.id" />
				</el-select>
			</el-form-item>
			<el-form-item label="二级分类名称" prop="name">
				<el-input v-model="state.from.name" />
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="save(ruleFormRef)">确定 新增</el-button>
			</div>
		</template>
	</el-dialog>
</template>
<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import { ref } from 'vue'
const ruleFormRef = ref<FormInstance>()
const  state = reactive(<any>{
	dialogVisible: false,
	dialogSaveVisible: false,
	title: '',
	cateList:[],
	childList:[],
	from:{}
})
const rules = reactive({
	name: [
		{
			required: true,
			message: '名称不能为空',
			trigger: 'change',
		},
	],fid: [
		{
			required: true,
			message: '分类层级不能为空',
			trigger: 'change',
		},
	],
})
function init() {
	http.get("/cate?fid=0").then(res =>{
		state.cateList = res.data
	})
}

function btn(type: string, data: any) {
	state.dialogVisible = true
	state.title = type

	state.from = data
}

function lableTwo(fid: number) {
	http.get(`/cate?fid=${fid}`).then(res =>{
		state.childList = res.data
	})
}

/**
 * 二级分类列表
 * @param data
 */
function to(data:number) {
	lableTwo(data)

}
/**
 * 删除
 */
function del(id:any,fid:any) {
	http.delete(`/cate/${id}`).then(() =>{
		toast.success("删除成功！")
		lableTwo(fid)
		init()
	})
}
//新增
const save = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid) => {
		if (valid) {
			http.post('cate', state.from).then(() => {
				toast.success('新增成功')
				state.dialogSaveVisible = false
				init()
			})
		}
	})
}
//修改
const update = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid) => {
		if (valid) {
			http.put('cate', state.from).then(() => {
				toast.success('修改成功')
				state.dialogVisible = false
				state.from = {}
				lableTwo(state.from.fid)
				init()
			})
		}
	})
}

onMounted(()=>{
	init()
})
</script>

<style scoped>

</style>
<route lang="json">
{
"meta": {
"title": "后台",
"layout": "admin"
}
}
</route>
